import QtQuick 6.2
import QtQuick.Controls 6.2
import QtQuick.Layouts 6.2
import QtQuick.Shapes 1.15
import QtQuick.Window 2.15
import QtQuick.Particles 2.15
import QtQuick.Controls.Material 2.15

Item {
    id: item1
    width: 1440
    height: 960

    Slider {
        id: slider
        x: 942
        width: 290
        height: 72
        anchors.right: parent.right
        anchors.top: parent.top
        wheelEnabled: true
        stepSize: 1
        to: 100
        anchors.rightMargin: 208
        anchors.topMargin: 190
        value: force
        onMoved: {
            task_brake.setWheel_Force(slider.value);
        }
        Label {
            id: label
            x: -122
            y: 22
            width: 109
            height: 28
            text: qsTr("力反馈强度：")
            font.pointSize: 16
        }
    }

    Slider {
        id: slider1
        x: 942
        width: 290
        anchors.right: parent.right
        anchors.top: slider.bottom
        anchors.bottom: parent.bottom
        wheelEnabled: true
        anchors.bottomMargin: 625
        anchors.rightMargin: 208
        anchors.topMargin: 1
        stepSize: 1
        to: 100
        value: gain
        onMoved: {
            task_brake.setWheel_Gain(slider1.value);
        }
        Label {
            id: label1
            x: -122
            y: 22
            width: 109
            height: 28
            text: qsTr("增益：")
            font.pointSize: 16
        }
    }

    Slider {
        id: slider2
        x: 942
        width: 290
        anchors.right: parent.right
        anchors.top: slider1.bottom
        anchors.bottom: parent.bottom
        wheelEnabled: true
        to: 100
        stepSize: 1
        anchors.bottomMargin: 552
        anchors.rightMargin: 208
        anchors.topMargin: 1
        value: friction_t
        onMoved: {
            task_brake.setWheel_Friction(slider2.value);
        }
        Label {
            id: label3
            x: -122
            y: 22
            width: 109
            height: 28
            text: qsTr("阻力：")
            font.pointSize: 16
        }
    }

    Label {
        id: label2
        x: 820
        y: 429
        width: 109
        height: 28
        text: qsTr("编码器线数：")
        font.pointSize: 16
    }

    Button {
        id: button
        width: 80
        height: 40
        text: qsTr("校准")
        anchors.top: item_whell.bottom
        anchors.horizontalCenterOffset: 115
        anchors.horizontalCenter: item_whell.horizontalCenter
        anchors.topMargin: 43
        onClicked: {
            task_brake.start_Calibration();
        }
    }

    Item{
        id:item_whell
        x: 528
        y: 215
        width: 384
        height: 384
        anchors.bottom: parent.bottom
        anchors.horizontalCenterOffset: -270
        anchors.bottomMargin: 361
        anchors.horizontalCenter: parent.horizontalCenter

        Image {
            id: dial_outside_ring_195_9
            x: 528
            y: 138
            width: 384
            height: 384
            rotation: wheel_engle
            anchors.fill: parent
            source: "qrc:/assets/wheel.png"
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            fillMode: Image.PreserveAspectFit
        }
        Text {
            id: text2
            x: 665
            y: 265
            anchors.verticalCenter: dial_outside_ring_195_9.verticalCenter
            anchors.horizontalCenter: dial_outside_ring_195_9.horizontalCenter
            width: 109
            height: 49
            color: "#000000"
            text: wheel_engle.toFixed(2) + "°"
            font.pixelSize: 40
            horizontalAlignment: Text.AlignHCenter
            anchors.verticalCenterOffset: -219
        }
    }

    Text {
        id: text3
        width: 157
        height: 71
        text: qsTr("方向盘")
        anchors.left: parent.left
        anchors.top: parent.top
        font.pixelSize: 50
        anchors.topMargin: 111
        anchors.leftMargin: 117
    }

    Dial {
        id: dial
        x: 971
        width: 232
        height: 204
        anchors.right: parent.right
        anchors.top: parent.top
        wheelEnabled: true
        wrap: true
        value: 180
        stepSize: 0.01
        to: 315
        from: 45
        anchors.rightMargin: 237
        anchors.topMargin: 516
        onMoved: {
            task_brake.setWheel_Engle(dial.value - 180)
        }
        Behavior on value {
            NumberAnimation{
                duration: 200
            }
        }
    }

    Label {
        id: label4
        x: 820
        y: 604
        width: 109
        height: 28
        text: qsTr("反馈测试：")
        font.pointSize: 16
    }

    TextInput {
        id: textInput
        x: 971
        y: 431
        width: 243
        height: 24
        text: encoderCPR
        font.letterSpacing: 10
        font.pixelSize: 20
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        font.weight: Font.Light
        validator: IntValidator{bottom:0;top:65535}
        maximumLength: 8
        onTextChanged: {
            task_brake.setWheel_EncoderCPR(Number(textInput.text))
        }
    }


    Rectangle {
        id: rectangle
        x: 280
        width: 200
        height: 35
        opacity: 0.095
        color: "#e91e63"
        radius: 10
        anchors.right: button.left
        anchors.top: item_whell.bottom
        anchors.rightMargin: 45
        anchors.topMargin: 46
    }

    TextInput {
        id: textInput1
        opacity: 1
        text: degrees
        anchors.left: rectangle.left
        anchors.right: rectangle.right
        anchors.top: rectangle.top
        anchors.bottom: rectangle.bottom
        font.pixelSize: 20
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        anchors.rightMargin: 0
        anchors.leftMargin: 0
        anchors.bottomMargin: 0
        anchors.topMargin: 0
        maximumLength: 1080
        validator: IntValidator{bottom:0;top:960}
        onTextChanged: {
            degrees = textInput1.text
            task_brake.setWheel_Degrees(Number(textInput1.text))
        }
        Text {
            id: text1
            width: 72
            text: qsTr("度数：")
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            font.pixelSize: 20
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
            anchors.leftMargin: 0
            anchors.topMargin: 0
            anchors.bottomMargin: 0

        }
    }
    Rectangle {
        id: rectangle1
        width: 640
        height: 200
        color: "#00ffffff"
        radius: 10
        border.color: "#e91e63"
        border.width: 2
        anchors.top: item_whell.bottom
        anchors.horizontalCenter: item_whell.horizontalCenter
        anchors.topMargin: 111

        Canvas {
            id:wheel_force
            property var axis_y: []
            anchors.fill: parent
            onPaint:{
                var ctx = getContext("2d")
                ctx.clearRect(0,0,wheel_force.width,wheel_force.height)
                //            ctx.quadraticCurveTo()
                ctx.strokeStyle = "#FF0000"
                ctx.beginPath();
                ctx.moveTo(0,axis_y[0])
                for(var i = 0; i < axis_y.length;i++){
                    ctx.lineTo(i,axis_y[i])
                }
                //            ctx.closePath()
                ctx.lineWidth = 2;
                //            ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI/4,Math.PI/4 + rx)
                ctx.stroke()
            }
            Canvas {
                anchors.fill: parent
                onPaint:{
                    var ctx = getContext("2d")
                    ctx.strokeStyle = "#000000"
                    for(var i = 1; i < 18;i++){
                        if(i%5 == 4){
                            ctx.moveTo(625,i*10 +10)
                            ctx.lineTo(635,i*10 +10)
                            ctx.closePath()
                        }else{
                            ctx.moveTo(630,i*10 +10)
                            ctx.lineTo(635,i*10 +10)
                            ctx.closePath()
                        }
                    }
                    //            ctx.closePath()
                    //                ctx.fontSize = '20px'
                    ctx.textAlign = 'center'
                    ctx.fillText("-1",620,190)
                    ctx.fillText("0",620,105)
                    ctx.fillText("1",620,10)
                    ctx.lineWidth = 0.5;
                    //            ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI/4,Math.PI/4 + rx)
                    ctx.stroke()
                }
            }
            onAxis_yChanged: {
                if(axis_y.length >= 640){
                    axis_y.shift()
                }
//                console.log("y:" + axis_y[axis_y.length - 1] + " len: " + axis_y.length )
                wheel_force.requestPaint()
            }
        }

        Label {
            id: label5
            width: 109
            height: 28
            text: qsTr("力输出曲线：")
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.leftMargin: 13
            anchors.topMargin: 11
            font.pointSize: 14
        }
    }
    Connections{
        target: task_brake
        function onWheel_engleChanged(engle){
            force[0] = engle;
        }

        function onWheel_configChanged(config){

        }

    }

    //    StackView {
    //        id: stackView
    //        x: 273
    //        y: 642
    //        width: 200
    //        height: 40
    //        initialItem: item2.children[stackView.i]
    //        property int i: item2.children.length
    //        MouseArea {
    //            id: mouseArea
    //            anchors.fill: parent
    //            onWheel:(wheel)=> {
    //                        if(wheel.angleDelta.y > 0){
    //                            if(stackView.i !== 0){
    //                                stackView.push(item2.children[stackView.i])
    //                                stackView.i--
    //                                console.log(item2.children.length + " a:" + stackView.depth + "i:" + stackView.i)
    //                            }
    //                        }else{

    //                            if(stackView.depth > 1){
    //                                stackView.pop()
    //                                stackView.i++
    //                                console.log(item2.children.length + " a:" + stackView.depth + "i:" + stackView.i)
    //                            }
    //                            //                            console.log(stackView.depth)
    //                        }
    //                    }
    //        }
    //        pushExit: Transition{
    //            PropertyAnimation{
    //                property: "opacity"
    //                from: 1
    //                to: 0
    //                duration:200
    //            }
    //            PropertyAnimation{
    //                property: "y"
    //                from: 0
    //                to: 50
    //                duration:200
    //            }
    //        }
    //        pushEnter: Transition{
    //            PropertyAnimation{
    //                property: "opacity"
    //                from: 0
    //                to: 1
    //                duration:200
    //            }
    //            PropertyAnimation{
    //                property: "y"
    //                from: -50
    //                to: 0
    //                duration:200
    //            }
    //        }
    //        popExit: Transition{
    //            PropertyAnimation{
    //                property: "opacity"
    //                from: 1
    //                to: 0
    //                duration:200
    //            }
    //            PropertyAnimation{
    //                property: "y"
    //                from: 0
    //                to: -50
    //                duration:200
    //            }
    //        }
    //        popEnter: Transition{
    //            PropertyAnimation{
    //                property: "opacity"
    //                from: 0
    //                to: 1
    //                duration:200
    //            }
    //            PropertyAnimation{
    //                property: "y"
    //                from: 50
    //                to: 0
    //                duration:200
    //            }
    //        }
    //        Rectangle {
    //            id: rectangle
    //            opacity: 0.1
    //            color: "#e91e63"
    //            radius: 10
    //            anchors.fill: parent
    //        }
    //    }

    //    Item {
    //        id: item2
    //        x: 220
    //        y: 705
    //        width: 200
    //        height: 40
    //        visible: false

    //        Text {
    //            id: text1
    //            width: 200
    //            height: 40
    //            text: qsTr("180")
    //            font.pixelSize: 24
    //            horizontalAlignment: Text.AlignHCenter
    //            verticalAlignment: Text.AlignVCenter
    //        }

    //        Text {
    //            id: text4
    //            width: 200
    //            height: 40
    //            text: qsTr("270")
    //            font.pixelSize: 24
    //            horizontalAlignment: Text.AlignHCenter
    //            verticalAlignment: Text.AlignVCenter
    //        }

    //        Text {
    //            id: text5
    //            width: 200
    //            height: 40
    //            text: qsTr("360")
    //            font.pixelSize: 24
    //            horizontalAlignment: Text.AlignHCenter
    //            verticalAlignment: Text.AlignVCenter
    //        }

    //        Text {
    //            id: text6
    //            width: 200
    //            height: 40
    //            text: qsTr("450")
    //            font.pixelSize: 24
    //            horizontalAlignment: Text.AlignHCenter
    //            verticalAlignment: Text.AlignVCenter
    //        }

    //        Text {
    //            id: text7
    //            width: 200
    //            height: 40
    //            text: qsTr("540")
    //            font.pixelSize: 24
    //            horizontalAlignment: Text.AlignHCenter
    //            verticalAlignment: Text.AlignVCenter
    //        }

    //        Text {
    //            id: text8
    //            width: 200
    //            height: 40
    //            text: qsTr("630")
    //            font.pixelSize: 24
    //            horizontalAlignment: Text.AlignHCenter
    //            verticalAlignment: Text.AlignVCenter
    //        }

    //        Text {
    //            id: text9
    //            width: 200
    //            height: 40
    //            text: qsTr("720")
    //            font.pixelSize: 24
    //            horizontalAlignment: Text.AlignHCenter
    //            verticalAlignment: Text.AlignVCenter
    //        }
    //    }

}
